<template>
  <div class="reg-user-item">
	  <div class="container">
	  	<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
	  	  <el-form-item>
	  	    <upload></upload>
	  	  </el-form-item>
		  <el-form-item label="用户名" prop="username">
	  	    <el-input type="input" v-model="ruleForm.username" autocomplete="off"></el-input>
	  	  </el-form-item>
		  <el-form-item label="密码" prop="password">
	  	    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
	  	  </el-form-item>
	  	  <el-form-item label="确认密码" prop="checkPass">
	  	    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
	  	  </el-form-item>
		  <el-form-item label="昵称" prop="nickname">
		    <el-input type="input" v-model="ruleForm.nickname" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item label="邮箱" prop="email">
		    <el-input type="input" v-model="ruleForm.email" autocomplete="off"></el-input>
		  </el-form-item>
	  	  <el-form-item label="年龄" prop="age">
	  	    <el-input v-model.number="ruleForm.age"></el-input>
	  	  </el-form-item>
	  	  <el-form-item>
	  	    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
	  	    <el-button @click="resetForm('ruleForm')">重置</el-button>
	  	  </el-form-item>
	  	</el-form>
	  </div>
	</div>
</template>

<script>
import {regUser} from 'network/login.js'
import upload from 'components/common/upload.vue'
export default {
	name:'regUserItem',
	components:{
		upload
	},
	data() {
	      var checkAge = (rule, value, callback) => {
	        if (!value) {
	          return callback(new Error('年龄不能为空'));
	        }
	        setTimeout(() => {
	          if (!Number.isInteger(value)) {
	            callback(new Error('请输入数字值'));
	          } else {
	            if (value < 0) {
	              callback(new Error('您还未出生！'));
	            } else {
	              callback();
	            }
	          }
	        }, 1000);
	      };
	      var validatePass = (rule, value, callback) => {
	        if (value === '') {
	          callback(new Error('请输入密码'));
	        } else {
	          if (this.ruleForm.checkPass !== '') {
	            this.$refs.ruleForm.validateField('checkPass');
	          }
	          callback();
	        }
	      };
	      var validatePass2 = (rule, value, callback) => {
	        if (value === '') {
	          callback(new Error('请再次输入密码'));
	        } else if (value !== this.ruleForm.password) {
	          callback(new Error('两次输入密码不一致!'));
	        } else {
	          callback();
	        }
	      };
	      return {
	        ruleForm: {
				avatar:'',
				username:'',
				password: '',
				checkPass: '',
				nickname: '',
				email:'',
				age: ''
	        },
			dialogImageUrl: '',
			dialogVisible: false,
	        rules: {
	          pass: [
	            { validator: validatePass, trigger: 'blur' }
	          ],
	          checkPass: [
	            { validator: validatePass2, trigger: 'blur' }
	          ],
	          age: [
	            { validator: checkAge, trigger: 'blur' }
	          ]
	        }
	      };
	    },
	methods: {
	      submitForm(formName) {
	        this.$refs[formName].validate((valid) => {
	          if (valid) {
	            alert('submit!');
				regUser(this.ruleForm).then(res=>{
					if(res.status == 0)
						this.$router.push('/login');
					else
						alert('注册失败，请检查您的网络并稍后再试！')
				})
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	      },
	      resetForm(formName) {
	        this.$refs[formName].resetFields();
	      },
		  handleRemove(file, fileList) {
		        console.log(file, fileList);
		  },
		  handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		}
	  }
}
</script>

<style scoped>
	.container{
		width: 30%;
		margin: 0 auto;
	}
	form{
		text-align: center;
		margin: 0 auto;
	}
	td{
		padding: 6px 0;
	}
	table,td{
		margin: 0 auto;
		border: 0px;
	}
	button{
		color: white;
		background-color: #4e6ef2;
		border-radius: 6px;
	}
	#user_pic{
		width: 177px;
		padding: 0 auto;
	}
</style>